<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        #box{
            width: 100%;
            height: 100vh;
            overflow: hidden;
            position: relative;
            margin: 0 auto;
        }
        li{
            list-style: none;
        }
        img{
            width: 100%;
        }
        ol{
            position: absolute;
            z-index: 9;
            display: flex;
            justify-content: space-between;
            width: 400px;
            margin: 0 auto;
        }
        ol li{
            background-color: #E8D7C3;
            color: white;
            width: 30px;
            height: 30px;
            border-radius: 30px;
            text-align: center;
            line-height: 30px;
            cursor: pointer;
        }
        #ulli li{
            position: absolute;
            opacity: 0;
            transition: all 1s;
        }
    </style>
</head>
<body>
<div id ="box">
    <ul id ="ulli">
        <li style="opacity: 1"><img src="imges/1000646.jpg"/></li>
        <li><img src="imges/1000009.jpg"/></li>
        <li><img src="imges/2021812.jpg"/></li>
        <li><img src="imges/2022617.jpg"/></li>
        <li><img src="imges/2022711.jpg"/></li>

    </ul>
    <ol id ="olli">
        <li style="background-color: black">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ol>
</div>
<script>
    var olli = document.getElementById('olli').getElementsByTagName('li')
    var ulli = document.getElementById('ulli').getElementsByTagName('li')
    var index = 0
    function setPic() {
        for (var i=0;i<ulli.length;i++){
            ulli[i].style.opacity = 0
            olli[i].style.backgroundColor = ''
        }
        ulli[index].style.opacity = 1
        olli[index].style.backgroundColor = '#000'
    }
    function changePic() {
        if (index===ulli.length-1) index = 0
        else index++
        setPic()
    }
    for (var i=0;i<olli.length;i++){
        olli[i].onmouseover = function () {
            index = parseInt(this.innerHTML-2)
            changePic()
        }
    }
    var timer = setInterval(changePic,4000)
    document.getElementById('olli').onmouseover = function () {
        clearInterval(timer)
    }
    document.getElementById('olli').onmouseout = function () {
        timer = setInterval(changePic,4000)
    }
</script>
</body>
</html>